<!-- 实时行情点评 -->
<template>
  <div>
    <div class="course-body">
      <div class="gradient">
        <div class="lecturer-info">
          <div class="left-container">
            <div class="lecture-icon">
              <img :src="info.host_img" alt="" />
            </div>
          </div>
          <div class="right-container">
            <div class="lecture-name">{{ info.host }}</div>
            <div class="span-list" v-if="info.tags && info.tags.length">
              <div v-for="(item, index) in info.tags" class="lecture-span mt-8 mr-8" :key="index">
                {{ item }}
              </div>
            </div>
            <div class="lecture-number mt-8">{{ `证书编号：${info.pro_id}` }}</div>
          </div>
        </div>
        <div class="lecture-nav mt-18">
          {{ info.intro }}
        </div>
      </div>
      <template
        v-if="info.products && info.products.series_list && info.products.series_list.length"
      >
        <div class="course-title">
          <div>TA的精选课程</div>
          <div class="more" v-if="info.products.series_list.length > 3" @click="expand">
            <template v-if="expandAll">
              <div class="mr-10">收起</div>
              <div class="icon-list-up"></div>
            </template>
            <template v-else>
              <div class="mr-10">展开</div>
              <div class="icon-list-down"></div>
            </template>
          </div>
        </div>
        <div class="course-info">
          <template v-for="(item, index) in info.products.series_list">
            <CourseRow
              v-if="index < 3 || expandAll"
              :auth="info.products.auth"
              :isWindowShow="isWindowShow"
              :info="item"
              :sid="info.sid"
              :key="index"
            ></CourseRow>
          </template>
        </div>
        <div class="lock-button" v-if="!info.products.auth" @click="goPay">
          <i class="icon-lock-white mr-8"></i>
          <span>{{ `立即解锁${info.product_name}体系` }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import CourseRow from './CourseRow.vue';
import { eventBus } from '@/lib/eventBus.js';
export default {
  name: 'CourseContainer',
  components: { CourseRow },
  data() {
    return {
      expandAll: false,
      isWindowShow: true,
    };
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    this.initOnshow();
  },
  beforeDestroy() {
    eventBus.$off('onShow', {});
  },
  methods: {
    initOnshow() {
      // 初始化onshow事件，主要为了从课程页返回时更新记录,为了减少总线监听，放在父组件
      eventBus.$on('onShow', type => {
        this.isWindowShow = type;
      });
    },
    goDetails() {
      // 跳转直播列表
      window.statConf.click('textlive');
      this.$router.push({ path: 'reviewsList', query: {} });
    },
    expand() {
      this.expandAll = !this.expandAll;
    },
    goPay() {
      // 跳转常规支付
      const url = `${_Global.url.payIndex}?sid=${this.info.sid}`;
      window.statConf.click('course.unlock');
      window.location.href = url;
    },
  },
};
</script>

<style lang="less" scoped>
.course-body {
  padding: 0.22rem 0.2rem 0.28rem;
  .course-title {
    padding: 0.28rem 0 0.24rem;
    height: 0.36rem;
    font-size: 0.28rem;
    line-height: 0.36rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    .more {
      font-size: 0.24rem;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.6);
      line-height: 0.36rem;
      display: flex;
      align-items: center;
      .icon-more {
        width: 0.1rem;
        height: 0.18rem;
        background-image: url('../../assets/images/icon-more.png');
        background-size: 100% 100%;
      }
    }
  }
}
.lecturer-info {
  display: flex;
}
.left-container {
  width: 1.12rem;
  margin-right: 0.16rem;
  .lecture-icon {
    width: 1.12rem;
    height: 1.12rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.right-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  .lecture-name {
    height: 0.4rem;
    font-size: 0.32rem;
    line-height: 0.4rem;
    font-weight: 500;
  }
  .lecture-span {
    height: 0.32rem;
    line-height: 0.36rem;
    background: rgba(255, 36, 54, 0.1);
    border-radius: 0.04rem;
    padding: 0 0.08rem;
    font-size: 0.2rem;
    color: #ff2436;
    display: inline-block;
  }
  .lecture-number {
    height: 0.28rem;
    font-size: 0.2rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 0.28rem;
    white-space: nowrap;
  }
}
.lecture-nav {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0.08rem;
  padding: 0.12rem 0.16rem;
  font-size: 0.24rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 0.36rem;
  font-weight: 400;
}
.lock-button {
  margin-top: 0.28rem;
  height: 0.88rem;
  background: #ff2436;
  border-radius: 0.08rem;
  display: flex;
  justify-content: center;
  align-items: center;
  .icon-lock-white {
    width: 0.32rem;
    height: 0.32rem;
    background-image: url('../../assets/images/icon-lock-white.png');
    background-size: 100% 100%;
  }
  span {
    height: 0.4rem;
    font-size: 0.32rem;
    color: #ffffff;
    line-height: 0.4rem;
  }
}
.course-info {
  display: flex;
  flex-direction: column;
  .course-row {
    margin-top: 0.28rem;
    &:first-child {
      margin-top: 0;
    }
  }
}
</style>
